<template>
  <div style="height:0.5rem;" ref="lm"></div>
</template>

<script>
export default {
  name: "loadMore",
  data() {
    return {
      isActivated: true
    };
  },
  methods: {
    handleScroll() {
      if (!this.isActivated) return;
      if (this.$refs.lm) {
        let scrollTop =
          document.documentElement.scrollTop ||
          window.pageYOffset ||
          document.body.scrollTop;
        if (scrollTop + document.body.clientHeight > this.$refs.lm.offsetTop) {
          this.$emit("loadMore");
        }
      }
    }
  },
  activated() {
    this.isActivated = true;
  },
  deactivated() {
    this.isActivated = false;
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  }
};
</script>

<style></style>
